<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <style> 
      div {
        width: 100%;
        opacity: 0.5;
        height: 150px;
        margin-bottom: 20px;
        box-sizing: border-box;
        background: blue;
        transition: all 2s;
        /*考虑兼容，加上浏览器前缀*/
        -moz-transition: all 2s; /* Firefox 4 */
        -webkit-transition: all 2s; /* Safari and Chrome */
        -o-transition: all 2s; /* Opera */
      }
     div.visited {
        opacity: 1;
        margin-bottom: 10px;
     }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 </head>
 <body>
 
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 <div class="tag">替换成需要的内容</div>
 
 <p>滚动鼠标滚轮可看见效果</p>
 
 <p> <b>注释：</b>
 本例在 Internet Explorer 中无效。
 </p>
 <script type="text/javascript">
       $(window).scroll(function(event) {//监听滚动
             var toppt = null;
             $('.tag').each(function(index, el) {
                // 逐个判断是否在可视区域内
                toppt = this.offsetTop;
                if (toppt >= $(window).scrollTop() && toppt < ($(window).scrollTop()+$(window).height())) {
                  $(this).addClass('visited');//可视区域内,添加样式
                }else{
                  $(this).removeClass('visited');//非可视区域内,删除样式
                }
             });
       });
      $(function () {
           //准备好文档后，第一次手动触发
           $(window).trigger('scroll');
      });
 </script>
 </body>
</html>